<!-- 顶部导航 -->
<template>
<nav class="top-nav">
    <div class="container">
        <ul>
            <li v-if="$store.state.user.userInfo.account">
                <!-- rout-link 标签本质是个a标签，打包编译为a标签 -->
                <router-link to="/member">
                    <i class="iconfont icon-icon-user"></i>
                    {{ $store.state.user.userInfo.account }}
                </router-link>
                   
            </li>

            <!-- .user 是因为命名空间，所以必须写模块名; js语法，如果调用链出现空，默认为false -->
            <li v-if="$store.state.user.userInfo.id">
                <!--javascript:void(0) 点击不跳转 ，简写：javascript:; -->
                <a href="javascript:void(0)" @click="loginOut">退出登录</a>
            </li>
            <li v-else>
                <router-link to="/login">请先登录</router-link>
            </li>
            <li v-if="!$store.state.user.userInfo.id">
                <router-link to="/register">免费注册</router-link>
            </li>
            <li>
                <router-link to="/member/order">我的订单</router-link>
            </li>
            <li>
                <a href="javascript:;">会员中心</a>
            </li>
            <li>
                <a href="javascript:;">帮助中心</a>
            </li>
            <li>
                <a href="javascript:;">关于我们</a>
            </li>
            <li>
                <router-link to="/download"><i class="iconfont icon-phone"></i>手机版</router-link>
            </li>
        </ul>
    </div>
</nav>
</template>
<script>
import { removeUserInfo, removeToken } from '@/utils/userInfo';

export default{
    name: "app-nav",
    methods: {
        loginOut() {
            this.$confirm('确定退出吗？','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                    removeUserInfo(); // 清空本地存储
					removeToken(); // 清空本地token
					this.$store.commit('user/loginOut');
					this.$message({
						type: 'success',
						message: '退出成功!',
					});
					this.$router.push('/login');
            })
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出',
					});
				});
        }
    },

}

</script>


<!--  ~li是指兄弟选择器,即li同级的所有 -->
<style lang="less" scoped>
@import '@/assets/styles/variables.less';
.top-nav{
    background: #333;
    ul{
      height: 53px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      li{
        a{
            padding: 0 15px;
            color: #cdcdcd;
            &:hover{
                color:@themeColor;
                cursor: pointer;
            }
        }

        ~li{
            a{
                border-left: 2px solid #666;
            }
        }
      }  
    }
}
</style>